<!-- 1.完善个人信息 -->
<template>
  <div style="width:100%">
    <a-form-model
      :model="user"
      :rules="formRules"
      ref="formRef"
      :style="{'margin': '40px auto 0'}"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <!-- 用户名 -->
      <a-form-model-item :label="$t('all.autotext92')">
        <span> {{ user.userName }} </span>
      </a-form-model-item>
      <!-- 姓名 -->
      <a-form-model-item :label="$t('all.autotext977')" prop="name">
        <a-input v-model="user.name" />
      </a-form-model-item>
      <!-- 身份证 -->
      <a-form-model-item :label="$t('all.autotext689')" prop="idCard">
        <a-input v-model="user.idCard" />
      </a-form-model-item>
      <!-- 手机号 -->
      <a-form-model-item :label="$t('all.autotext709')">
        <span>{{ user.phone }}</span>
      </a-form-model-item>
      <!-- 邮箱 -->
      <a-form-model-item :label="$t('all.autotext44')">
        <span style="flex:1;margin-right:10px">{{ user.email || $t('all.autotext1238') }}</span>
        <a @click="clickBindEmail" v-if="!user.email">{{ $t('all.autotext1270') }}</a>
      </a-form-model-item>
      <!-- 组织机构 -->
      <a-form-model-item :label="$t('all.autotext785')">
        <span>{{ user.orgName }}</span>
      </a-form-model-item>
      <!-- 职务 -->
      <a-form-model-item :label="$t('all.autotext1334')">
        <span>{{ user.position }}</span>
      </a-form-model-item>
      <div class="centerView">
        <a-button type="dashed" @click="logout" style="margin-right:20px">{{ $t('all.autotext1435') }}</a-button>
        <a-button type="primary" @click="nextStep" >{{ $t('all.autotext1028') }}</a-button>
      </div>
    </a-form-model>
    <Modal
      :modalTitle="$t('all.autotext1270')"
      :modalVisible="modalVisible"
      :isPhone="false"
      @closeModal="closeModal"
    />
  </div>
</template>

<script>
import { getPersonDetail, updatePersonDetail } from '@/api/account/person'
import Modal from '../account/settings/components/Modal'
export default {
  name: '',
  components: {
    Modal
  },
  data () {
    return {
      user: {},
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
      formRules: {
        name: [{ required: true, message: this.$t('all.autotext479'), trigger: 'change' }],
        birthday: [{ required: true, message: this.$t('all.autotext1073'), trigger: 'change' }],
        idCard: [
          { required: true, message: this.$t('all.autotext1204'), trigger: 'change' },
          { trigger: 'blur', pattern: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/, message: this.$t('all.autotext1052') }
        ]
      },
      modalVisible: false
    }
  },
  created () {
    this.getPersonDetail(0)
  },
  methods: {
    logout () {
      this.$store.dispatch('Logout').then(() => {
        this.$router.push({ name: 'login' })
      })
    },
    // 获取个人详情
    getPersonDetail (flag) {
      getPersonDetail()
        .then(res => {
          if (flag === 1) {
            this.user.email = res.email
          } else {
            this.user = res
          }
        })
    },
    // 更新个人信息
    updatePersonDetail () {
      const { userName, name, idCard, email, phone, position, orgName, birthday } = { ...this.user }
      const commitData = { userName, name, idCard, email, phone, position, orgName, birthday }
      updatePersonDetail({ ...commitData })
        .then(res => {
          const status = res.status
          this.$emit('userInfo', { name, idCard, phone, status })
          this.$emit('nextStep')
        })
    },
    // 点击下一步
    nextStep () {
      // this.$emit('nextStep')
      this.$refs.formRef.validate(valid => {
        if (valid) {
          if (this.user.idCard && this.user.idCard.length > 14) {
            // 如果有身份证 截取生日
            this.user.birthday = this.user.idCard.substring(6, 10) + '-' + this.user.idCard.substring(10, 12) + '-' + this.user.idCard.substring(12, 14)
          }
          this.updatePersonDetail()
        }
      })
    },
    // 绑定邮箱
    clickBindEmail () {
      this.modalVisible = true
    },
    // 关闭弹窗
    closeModal (val) {
      if (val) {
        this.getPersonDetail(1)
      }
      this.modalVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
  .centerView{
    display:flex;
    justify-content:center;
    align-items: center;
  }
</style>
